<template>
	<view class="member-container">
		<scroll-view class="member-scroll" scroll-y>
			<view class="banner" @click="$u.route('/pages/user/record/record')">
				<view class="member-number">
					<view class="">No.{{ userInfo.number }}</view>
					<view class="">明细</view>
				</view>
				<view style="margin-top: 10rpx">账户余额</view>
				<view class="member-bottom">
					<view class="member-price">￥{{ balance }}</view>
					<view style="font-size: 24rpx">
						<view>充值本金￥{{ userInfo.rechargeBalance }}</view>
						<view>商家赠送￥{{ userInfo.giftBalance }}</view>
					</view>
				</view>
			</view>

			<view style="line-height: 100rpx; font-size: 30rpx; font-weight: 600">储值有礼</view>
			<view class="check-member flex flex--wrap">
				<view :class="{ active: isSelect === index }" v-for="(item, index) in balanceList" :key="item.id" @click="onCheck(item, index)">
					<!-- <view class="discount" v-if="isSelect === index"><u-icon name="checkmark-circle-fill" color="#e2b778" size="30"></u-icon></view> -->
					<view style="padding-top: 10rpx; font-size: 24rpx">
						￥
						<text style="font-size: 40rpx; font-weight: 600">{{ item.amount }}</text>
					</view>
					<view style="padding-top: 10rpx; font-size: 24rpx">售价{{ item.depositMoney }}</view>
					<!-- 赠券 -->
					<view class="gift-box" v-if="item.couponCount > 0">赠券 × {{ item.couponCount }}</view>
				</view>
			</view>
			<view class="explain">
				<view>活动说明:</view>
				<view style="margin-top: 10rpx">{{ reactifyRrmark }}</view>
			</view>

			<view v-if="couponList.length > 0">
				<GiftCoupon title="赠送优惠券" :couponList="couponList"></GiftCoupon>
				<!-- <view style="line-height: 120rpx; font-size: 35rpx; font-weight: 600"
          >赠送优惠券</view
        >
        <view class="gift-list" v-for="item in couponList" :key="item.id">
          <view class="info">
            <view class="left">
              <image
                src="@/static/icon/券.svg"
                style="width: 60rpx; height: 60rpx"
              ></image>
            </view>
            <view class="center">
              <view>{{ item.name }}</view>
              <view
                style="font-size: 24rpx; color: #b6b6b6; margin-top: 20rpx"
                >{{
                  item.remark
                    ? item.remark.length > 15
                      ? item.remark.slice(0, 15) + "..."
                      : item.remark
                    : ""
                }}</view
              >
            </view>
            <view class="right"> x{{ item.couponCount }}张 </view>
          </view>
        </view> -->
			</view>
		</scroll-view>

		<view class="member-footer">
			<view>
				<view>
					实付金额￥
					<text style="font-weight: 600">{{ depositMoney }}</text>
				</view>
				<view style="color: #f05f47">
					实际到账￥
					<text style="font-size: 40rpx">{{ amount }}</text>
				</view>
			</view>
			<view style="margin-top: 30rpx; font-size: 30rpx; width: 35%">
				<u-button @click="onRefill" style="color: #7d5a35" color="linear-gradient(to right, #edd2a0,#d5a967)" shape="circle">立即充值</u-button>
			</view>
		</view>
	</view>
</template>

<script>
import { refillPay } from '@/common/util.js';
import GiftCoupon from './components/GiftCoupon.vue';
export default {
	components: { GiftCoupon },
	data() {
		return {
			isSelect: 0,
			balanceList: [],
			checkData: {},
			userInfo: {},
			couponList: [], // 赠送券列表
			reactifyRrmark: ''
		};
	},
	onReady() {
		// #ifdef MP-ALIPAY
		uni.hideHomeButton();
		uni.setNavigationBarColor({
			frontColor: '#000000', // 设置文本颜色
			backgroundColor: '#ffffff' // 设置背景颜色
		});
		// #endif
	},
	computed: {
		balance() {
			if (this.userInfo.balance) {
				return this.userInfo.balance.toFixed(2);
			} else {
				return 0.0;
			}
		},
		depositMoney() {
			if (this.checkData.depositMoney) {
				return this.checkData.depositMoney.toFixed(2);
			} else {
				return 0.0;
			}
		},
		amount() {
			if (this.checkData.amount) {
				return this.checkData.amount.toFixed(2);
			} else {
				return 0.0;
			}
		}
	},
	onShow() {
		this.getPageList(this.isSelect);
	},
	methods: {
		async getPageList(index) {
			// 获取列表
			const res = await this.$api.getBalanceList();
			// console.log(res);
			this.balanceList = res.data || [];
			this.checkData = res.data[0] || {};
			this.userInfo = res.otherData || {};
			this.couponList = res.data[index]?.couponList || [];
			this.reactifyRrmark = res.data[index]?.remark || '无';
		},
		onCheck(item, index) {
			// 选中
			this.isSelect = index;
			this.checkData = item;
			this.couponList = item.couponList || [];
			this.reactifyRrmark = item.remark || '无';
		},
		onRefill() {
			// 充值
			if (this.balanceList.length < 1) return;
			refillPay(0, {
				money: this.checkData.depositMoney,
				giftAmount: this.checkData.giveMoney
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.member-container {
	background-color: #f5f5f5;
	height: 100vh;
	width: 100%;
	padding: 30rpx 30rpx 0;
	.member-scroll {
		height: calc(100vh - 240rpx);

		.banner {
			padding: 30rpx;
			margin-top: 30rpx;
			background-color: #1b1b1b;
			height: 260rpx;
			border-radius: 10rpx;
			box-shadow: 5rpx 5rpx 5rpx #8c8c8c;
			color: #e5cd9b;

			.member-number {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.member-bottom {
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: 30rpx;
				.member-price {
					font-size: 50rpx;
				}
			}
		}

		.check-member {
			// padding-top: 50rpx;

			& > view {
				display: flex;
				justify-content: center;
				flex-direction: column;
				align-items: center;
				position: relative;
				margin-top: 45rpx;
				height: 200rpx;
				width: 30%;
				margin-right: 20rpx;
				border-radius: 15rpx;
				background-color: #ffffff;
				color: #666666;
				// text-align: center;

				.discount {
					position: absolute;
					top: -4rpx;
					left: -4rpx;
					border-top-left-radius: 15rpx;
					border-bottom-right-radius: 5rpx;
					text-align: center;
					line-height: 40rpx;
					color: #fff;
					font-size: 20rpx;
				}
				.gift-box {
					z-index: 99;
					text-align: center;
					width: 80%;
					height: 50rpx;
					position: absolute;
					top: -25rpx;
					line-height: 50rpx;
					color: #fff;
					background-color: #e0bb80;
					border-radius: 25rpx;
				}
			}
			.active {
				background-color: #fcf5ea;
				border: 4rpx solid #e2b778;
				color: #754605;
			}
		}
		// 赠送列表
		// .gift-list {
		//   margin-top: 20rpx;
		//   height: 200rpx;
		//   background-color: #fff;
		//   padding: 35rpx 25rpx;
		//   border-radius: 10rpx;
		//   .info {
		//     display: flex;
		//     align-items: center;
		//     border-radius: 10rpx;
		//     height: 120rpx;
		//     border: 1px solid #f2f2f2;
		//     padding: 10rpx;
		//     .left {
		//       width: 100rpx;
		//       height: 100rpx;
		//       background-color: #be2a2b;
		//       border-radius: 20rpx;
		//       display: flex;
		//       align-items: center;
		//       justify-content: center;
		//     }
		//     .center {
		//       flex: 1;
		//       padding-left: 30rpx;
		//     }
		//     .right {
		//       padding-right: 20rpx;
		//     }
		//   }
		// }
		.explain {
			padding-top: 30rpx;
			font-size: 26rpx;
			color: #b2b2b2;
		}
	}

	.member-footer {
		position: fixed;
		bottom: 0;
		left: 0;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 200rpx;
		padding: 30rpx;
		background-color: #fff;
	}
}
</style>
